<template>
  <div>
    <ul class="menuList">
      <li :class="{'active':index === activeIndex}" v-for="(item, index) in list" :key="index" @click="itemClick(index,item.path)"> {{item.title}} </li>
      
    </ul>
  </div>
</template>

<script>
const list =[
  {
    title:'个人信息',
    path:'/front/user/myInfo'
  },
  {
    title:'我的订单',
    path:'/front/user/myOrder'
  },
  {
    title:'我关注的商品',
    path:'/front/user/myCollect'
  },
  {
    title:'浏览历史',
    path:'/front/user/myLooked'
  },
  // {
  //   title:'我的故事',
  //   path:'/front/user/myStory'
  // },
  {
    title:'我的众筹',
    path:'/front/user/myGoods'
  },

]




export default {
  data() {
    return {
      list,
      activeIndex:0
    }
  },
  methods:{
    itemClick(i,path){
      if (path === this.$route.path) {
        return
      }
      this.$router.push(path)
      this.activeIndex = i
    },
    changeIndex(path){
      this.activeIndex = this.list.findIndex(v=>v.path === path)
    }

  },
  created(){
    this.changeIndex(this.$route.path)
  },
  watch:{
    $route(to,from){
      this.changeIndex(to.path)
    }
  }
}
</script>

<style>

 .menuList>li{
    line-height: 30px;
    /* padding-left: 15px; */
    cursor: pointer;
    padding: 0 10px ;
  }
  .active{
    color: var(--color-main);
  }
  .menuList>li:hover{
    background-color: #f5f5f5;
    color: var(--color-main);

  }
</style>